<template>
    <div-row :obj="obj">
        <div class="dynamic-list">
            <div class="tabs">
                <ul class="tab-top clearfix">
                    <li class="top-active">我的动态</li>
                    <li>公开动态</li>
                    <li>按标签查看</li>
                    <li>工作计划</li>
                </ul>
                <ul class="tab-bot clearfix">
                    <li class="bot-active">全部</li>
                    <li>@我的</li>
                    <li>回复我的</li>
                    <li>我收藏的</li>
                    <li>我发布的</li>
                    <li>下属动态</li>
                    <li>部门动态</li>
                    <div class="search-input">
                        <el-input placeholder="搜索我的动态" v-model="search" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </ul>
            </div>
            <div class="tab-list">
                <div class="list-item" v-for="(item, index) in DynamicList" :key="index">
                    <div class="item-top clearfix">
                        <div class="avtar">
                            <img class="img" :src="item.operator_user_head" alt="">
                            <span class="title">{{item.operator_user_name}}</span>
                        </div>
                        <div class="visible-box">
                            <el-dropdown>
                            <span class="el-dropdown-link">
                                <div class="visible-name"><span class="name"><i class="iconfont icon-lizhi"></i>仅相关成员可见<i class="iconfont icon-xialakuang"></i></span></div>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
                            </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="item-content">
                        <span class="tag">{{item.BIZ_JSON.OBJTYPE}}</span>
                        <div class="handle-tag">
                            <p>负责人：{{item.LEADING_USER}}</p>
                            <!-- <p>2020/03/01-2020/03/31</p> -->
                        </div>
                        <h3 class="title">
                            <span class="type">{{item.FORM_DEF_NAME}}</span>
                            <span class="name">{{item.SHOW_TITLE}}</span>
                        </h3>
                        <p class="desc">
                           
                        </p>
                        <!-- <div class="progress clearfix">
                            <span>进度：</span>
                            <span>
                                <el-progress :text-inside="true" :stroke-width="16" :percentage="40"></el-progress>
                            </span>
                        </div> -->
                    </div>
                    <div class="all-handle">
                        <div class="handle-btn">全部操作<i class="iconfont icon-angledoubledown"></i></div>
                        <div class="handle-list">
                            <div class="timeline">
                                <div class="timeline-item" v-for="(activity, index) in item.handleDetail" :key="index">
                                    <div class="timeline-item__tail"></div>
                                    <div class="timeline-item__node"></div>
                                    <div class="timeline-item-wrap clearfix">
                                        <div class="timeline-item__timestamp">{{activity.LOG_TIME}}</div>
                                        <div class="timeline-item__content">{{activity.DYNAMIC_TITLE}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item-bot clearfix">
                        <div class="time">{{item.OPERATOR_TIME}}</div>
                        <ul>
                            <li>
                                <i class="iconfont icon-biaoqian"></i>标签
                            </li>
                            <li>
                                <i class="iconfont icon-tiyanjin"></i>打赏
                            </li>
                            <li>
                                <i class="iconfont icon-shoucang"></i>收藏
                            </li>
                            <li>
                                <i class="iconfont icon-huifu"></i>回复
                            </li>
                            <li>
                                <i class="iconfont icon-dianzan1"></i>点赞
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div-row>
</template>
<script>
import { getQueryDynamic } from '@/api/api'
export default {
    title: 'DynamicList',
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {
            DynamicList: [],
            search: '',
        }
    },
    created(){
        this._getQueryDynamic();
    },
    methods: {
        _getQueryDynamic(){
            getQueryDynamic().then(res=>{
                let data = res.data.rows;
                data.map(item=>{
                    item.BIZ_JSON = JSON.parse(item.BIZ_JSON);
                })
                this.DynamicList = data;
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .dynamic-list{
        .tabs{
            color: #666;
            .tab-top{
                border-bottom: 1px solid #ccc;
                li{
                    float: left;
                    padding: 10px 15px;
                    font-size: 16px;
                    box-sizing: border-box;
                    &.top-active{
                        border-bottom: 2px solid #1687d9;
                    }
                }
            }
            .tab-bot{
                margin: 20px 10px;
                li{
                    float: left;
                    margin-right: 20px;
                    font-size: 14px;
                    &.bot-active{
                        color: #1687d9;
                    }
                }
                .search-input{
                    float: right;
                    width: 200px;
                }
            }
        }
        .tab-list{
            .list-item{
                border-bottom: 1px solid #f1f1f1;
                padding: 15px 0;
                .item-top{
                    .avtar{
                        float: left;
                        width: calc(100% - 240px);
                        span{
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .img{
                            width: 60px;
                            height: 60px;
                            border-radius: 50%;
                            background: #f5b168;
                            text-align: center;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .title{
                            font-size: 16px;
                            font-weight: bold;
                        }
                        
                    }
                    .visible-box{
                        float: right;
                        width: 160px;
                        margin-top: 20px;
                        .name{
                            background: #f1f1f1;
                            display: inline-block;
                            padding: 5px;
                            border-radius: 5px;
                        }
                        .visible-name{
                            i{
                                margin-right: 5px;
                            }
                            width: 100%;
                            text-align: right;
                            font-size: 14px;
                            color: #999;
                            .iconfont{
                                margin-left: 5px;
                                font-size: 16px;
                            }
                        }
                    }
                }
                .item-content{
                    position: relative;
                    background: #f4faff;
                    margin-left: 65px;
                    width: calc(100% - 65px);
                    padding: 15px;
                    overflow: hidden;
                    .title{
                        margin-bottom: 10px;
                        padding-right: 200px;
                        .type{
                            font-size: 20px;
                            color: #2d83d8;
                        }
                        .name{
                            font-size: 18px;
                            color: #005999;
                            line-height: 30px;
                        }
                    }
                    .desc{
                        font-size: 14px;
                        color: #666;
                        margin-bottom: 10px;
                    }
                    .tag{
                        width: 120px;
                        height: 30px;
                        line-height: 30px;
                        position: absolute;
                        right: -30px;
                        top: 10px;
                        color: #fff;
                        text-align: center;
                        font-size: 14px;
                        background: #58c583;
                        transform: rotate(40deg);
                    }
                    .handle-tag{
                        position: absolute;
                        top: 20px;
                        font-size: 15px;
                        color: #666;
                        right: 100px;
                        p{
                            margin-bottom: 10px;
                        }
                    }
                    .progress{
                        span{
                            font-size: 14px;
                            display: block;
                            float: left;
                            &:nth-child(1){
                                width: 50px;
                            }
                            &:nth-child(2){
                                width: 280px;
                            }
                        }
                        width: 330px;
                    }
                }
                .all-handle{
                    border-top: 1px solid #f1f1f1;
                    position: relative;
                    background: #f4faff;
                    padding: 15px;
                    margin-left: 65px;
                    
                    .handle-btn{
                        color: #666;
                        font-size: 14px;
                        margin-bottom: 10px;
                        &:hover{
                            color: #2d83d8;
                        }
                        .iconfont{
                            margin-left: 5px;
                        }
                    }
                }
                .item-bot{
                    margin-left: 65px;
                    margin-top: 10px;
                    font-size: 14px;
                    .time{
                        float: left;
                        color: #999;
                    }
                    ul{
                        float: right;
                        li{
                            display: inline-block;
                            border-right: 1px solid #ccc;
                            padding: 0 10px;
                            i{
                                margin-right: 5px;
                            }
                            &:last-child{
                                border-right: 0;
                            }
                        }
                    }
                }
            }
        }
        .timeline{
            .timeline-item{
                position: relative;
                font-size: 13px;
                color: #666;
                .timeline-item__tail{
                    position: absolute;
                    height: 100%;
                    border-left: 2px solid #E4E7ED;
                    left: 110px;
                    top: 0;
                }
                .timeline-item__node{
                    position: absolute;
                    background-color: #E4E7ED;
                    border-radius: 50%;
                    width: 12px;
                    height: 12px;
                    left: 105px;
                    top: 0;
                }
                &:last-child{
                    .timeline-item__tail{
                        display: none;
                    }
                }
                .timeline-item-wrap{
                    padding: 5px 0 15px;
                    .timeline-item__timestamp{
                        width: 120px;
                        float: left;
                        padding-right: 20px;
                    }
                    .timeline-item__content{
                        float: left;
                        padding-left: 20px;
                        width: calc(100% - 120px);
                    }
                }
            }
        }
    }
</style>
